<template>
	<div class="j-newlist">
		<j-header :indexNum="3"></j-header>
		<div class="jc-banner"></div>
		<div class="nav-title">
			<div class="container clearfix">
				<div class="nav-text pull-left">{{sub}}</div>
				<div class="nav-link pull-left">
					<router-link to="/">首页 </router-link>/
					<span>新闻中心 </span>/
					<span>{{sub}} </span>
				</div>
			</div>
		</div>
		<j-news :flagNum="num" style="background-color: #ffffff;margin: 50px auto 130px auto;"></j-news>
		<j-footer></j-footer>
	</div>
</template>
<script>
import JHeader from '../../components/Header.vue'
import JNews from '../../components/Home/News.vue'
import JFooter from '../../components/Footer.vue'
import api from '../../service/api'
export default {
  components: {
    JHeader, JFooter, JNews
  },
  data () {
    return {
      newsList: '',
      num: '1',
      sub: '集团动态'
    }
  },
  computed: {
    flag (){
      return this.$route.query.flag
    }
  },
  methods: {
    findAllNews () {
      api.findAllNews()
        .then(res => {
          if (res.code === 200) {
            this.newsList = res.result
            for (const i in res.result) {
              this.newsList[i].createdate = this.newsList[i].createdate.split(' ')[0]
              this.newsList[i].content = this.newsList[i].content.split('</p>')[0].split('<p>')[1]
              const _time = this.newsList[i].createdate.split('-')
              this.$set(this.newsList[i], 'time1', _time[0] + '-' + _time[1])
              this.$set(this.newsList[i], 'time2', _time[2])
            }
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    findNewsByFlag (flag) {
      api.findNewsByFlag(flag)
        .then(res => {
          if (res.code === 200) {
            this.newsList = res.result
            for (const i in res.result){
              this.newsList[i].createdate = this.newsList[i].createdate.split(' ')[0]
              this.newsList[i].content = this.newsList[i].content.split('</p>')[0].split('<p>')[1]
              const _time = this.newsList[i].createdate.split('-')
              this.$set(this.newsList[i], 'time1', _time[0] + '-' + _time[1])
              this.$set(this.newsList[i], 'time2', _time[2])
            }
          } else {
            console.log(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    toggleTab: function (index) {
      this.num = index
    }
  },
  created () {
    // document.title = '新闻中心'
    this.num = this.$route.query.flag
    if (this.$route.query.flag === '1') {
      this.sub = '集团动态'
    } else if (this.$route.query.flag === '2') {
      this.sub = '应用案例'
    } else if (this.$route.query.flag === '3') {
      this.sub = '行业新闻'
    }
  },
  watch: {
    flag (v){
      this.num = v
      if (this.num === '1') {
        this.sub = '集团动态'
      } else if (this.num === '2') {
        this.sub = '应用案例'
      } else if (this.num === '3') {
        this.sub = '行业新闻'
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	.j-newlist{
		.jc-banner {
			height: 150px;
			background: url(../../assets/banner/banner03.jpg) center top no-repeat;
		}
		.nav-back{
			background: #e9e9e9;
			/*height: 50px;*/
			line-height: 50px;
			.nav-tt{
				display: inline-block;
				height: 50px;
				/*width: 15%;*/
				font-size: 16px;
				color: #333333;
				cursor: pointer;
				margin-right: 100px;
			}
			.navActive{
				color: #02adef;
			}
		}
		.j-new-content{
			margin: 70px auto;
			.txt-list li {
				border-bottom: solid 1px #ddd;
				padding-bottom: 40px;
				margin-bottom: 40px;
			}
			.date-c {
				width: 80px;
				height: 80px;
				border-radius: 4px;
				background: #f5f5f6;
				color: #999;
				padding-top: 10px;
				.date-sm {
					font-size: 12px;
				}
				.date-lg {
					font-size: 40px;
					font-weight: bold;
					margin-top: -5px;
				}
			}
			.txt-width{
				padding-left: 40px;
				.txt-tt {
					font-size: 18px;
					color: #282828;
					font-weight: bold;
					a {
						color: #666;
						text-decoration: none;
					}
				}
				.txt-c {
					color: #999;
					font-size: 14px;
					margin-top: 20px;
					line-height: 25px;
					a {
						color: #666;
						text-decoration: none;
					}
				}
			}
		}
	}
	@media screen and (max-width: 1399px){
		.txt-width {
			width: 850px;
		}
	}
</style>
